{% extends "base.html" %}
{% block title %}2020 春节放假统计{% endblock %}
{% block styles %}{{ super() }}
<style>
    body {
        padding-top: 100px;
    }

    table {
        margin: 0 auto;
        /* width: 100%; */
        clear: both;
        border-collapse: collapse;
        table-layout: fixed;
        word-wrap: break-word;
    }
</style>
{% endblock %}

{% block scripts %}{{ super() }}
<script>
    $(document).ready(function () {
        $('#dt').DataTable(
            {

                "autoWidth": false,
                "search": {
                    "regex": true
                },

                "pageLength": 150,
                "order": [[0, "asc"]],

                dom: '<"top"flipB<"clear">>rt<"bottom"ipB<"clear">>',
                buttons: [
                    'copy', 'csv', 'excel'
                ],
                "columnDefs": [
                    { "width": "80px", "targets": 0 },
                    { "width": "50px", "targets": 1 },
                    { "width": "50px", "targets": 2 },
                ]


            });
    });

    $(function () {
        $("td.day").each(function (index, td) {
            var txt = td.textContent;
            switch (txt) {
                case '公休':
                    $(this).css('background-color', '#f7ff00');
                    break;

                case '年休':
                    $(this).css('background-color', '#2ae15f');
                    break;

                case '调休':
                    $(this).css('background-color', '#FF0000');
                    break;

                case '探亲':
                    $(this).css('background-color', '#15b4f0');
                    break;

                case '事':
                    $(this).css('background-color', '#a54e2b');
                    break;

                case '献血':
                    $(this).css('background-color', '#822ba5');
                    break;

                case ' ':
                    break;
                default:
                    $(this).css('background-color', '#7cc0c0');
                    break;
            }
        })
    })
</script>
{% endblock %}



{% block content %}
<div class="container-fluid">
    <div class="row">
        <h1 class="row page-header" style="text-align:center">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                2020 海工技术部春节放假统计
            </div>
        </h1>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table id="dt" class="row-border hover compact" style="width:100%">
                <thead>
                    <tr>
                        <th>部门</th>
                        <th>工号</th>
                        <th>姓名</th>
                        {% for day in days %}
                        <th>{{ day.replace('2020-','').replace('01-','').replace('02-','') }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for _,user in data.items() %}
                    <tr>
                        <td style="width:100px">
                            {{ user['position'].replace('(副科长)','').replace('(科长)','').replace('(组长)','').replace(' ','').strip() }}
                        </td>
                        <td style="width:50px">{{ user['no'] }}</td>
                        <td style="width:50px">{{ user['name'] }}</td>
                        {% for day in days %}
                        <td class="day">{{ user['tasks'][day].replace('假','').replace('加班','').replace('项目','') }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}

                </tbody>
            </table>

        </div>
    </div>


</div>
{% endblock %}